<template>
  <div class="h-full p-3 flex items-center justify-around">
    <card-item v-for="item in dataList" :key="item.type" :item="item"/>
  </div>
</template>

<script setup>
import cardItem from './cardItem.vue'
import {  reactive } from 'vue'
import {
  getCompletedTransferDocNum,
  getTodayTransferDocNum,
  getTransferMatSum,
  getTransferMatTypeNum
} from '@/api/transferQuantityApi'
import useI18n from '@/hooks/language'

const { t } = useI18n()

const dataList = reactive([
  {
    type: 'one',
    bgc: 'background: linear-gradient(to bottom, #eff7fe, #e7f4fe)',
    title: t('common.transferQty'),
    number: 50,
    isUp: true,
    num: 200,
    color:'#0e56f8',
    iconfont:'icon-tongjifenxi2',
    list: [],
    qty: 0,
    yesterdayQty: 0,
    unit:'Pcs'
  },
  {
    type: 'three',
    bgc: 'background: linear-gradient(to bottom, #eff7fe, #e7f4fe)',
    title: t('common.MaterialTransfer'),
    number: 255,
    isUp: false,
    num: 50,
    color:'#0e56f8',
    iconfont:'icon-zichanbaobiao',
    list: [],
    qty: 0,
    yesterdayQty: 0,
    unit:'Pcs'
  },
  {
    type: 'tow',
    bgc: 'background: linear-gradient(to bottom, #f2fef1, #e7feee)',
    title: t('common.generated'),
    number: 100,
    isUp: false,
    num: 100,
    color:'#2cab40',
    iconfont:'icon-tongjifenxi1',
    list: [],
    qty: 0,
    yesterdayQty: 0,
    unit:'Pcs'
  },

  {
    type: 'four',
    bgc: 'background: linear-gradient(to bottom, #f4f4ff, #ebebff)',
    title: t('common.materialsSum'),
    number: 60,
    isUp: false,
    num: 53,
    color:'#8d4eda',
    iconfont:'icon-tongji',
    list: [],
    qty: 0,
    yesterdayQty: 0,
    unit:''
  },
])


const getNumList =async ()=>{
  try {
    const [res1, res2, res3, res4] = await Promise.all([
      getTodayTransferDocNum(),
      getCompletedTransferDocNum(),
      getTransferMatTypeNum(),
      getTransferMatSum()
    ]);


      dataList.forEach(item=>{{

        item.list = []

        if (item.type === 'one') {
          item.qty = res1.data.qty
          item.yesterdayQty = res1.data.yesterdayQty
          item.transferNums = res1.data.transferNums
          res1.data.transferNums?.forEach(({ qty }) => item.list.unshift(qty))

        }

        if (item.type === 'tow') {
          item.qty = res2.data.qty
          item.yesterdayQty = res2.data.yesterdayQty
          item.transferNums = res2.data.transferNums
          res2.data.transferNums?.forEach(({ qty }) => item.list.unshift(qty))
        }

        if (item.type === 'three') {
          item.qty = res3.data.qty
          item.yesterdayQty = res3.data.yesterdayQty
          item.transferNums = res3.data.transferNums
          res3.data.transferNums?.forEach(({ qty }) => item.list.unshift(qty))
        }

        if (item.type === 'four') {
          item.qty = res4.data.qty
          item.yesterdayQty = res4.data.yesterdayQty
          item.materialTypeList = res4.data.materialTypeList

          const colorMap = {
            "上基材": '#8d4eda',
            "发泡板": '#00b2ff',
            "贴合板": '#165dff'
          };

          res4.data.materialTypeList?.forEach(({ materialCode, qty }) => {
            const obj = {
              value: qty,
              name: materialCode,
              itemStyle: {
                color: colorMap[materialCode] || '#000' // 默认颜色
              }
            };
            item.list.push(obj);
          });

        }



      }})




  } catch (e) {
    console.log(e)
  }
}

getNumList()

</script>

<style scoped lang="scss">

</style>
